// import { Fragment, useState } from "react";

// export default function UserList() {
//   const [users, setUsers] = useState([]);
//   const [loading, setLoading] = useState(false);
//   const [error, setError] = useState(null);

//   const fetchUsers = async () => {
//     setLoading(true);
//     try {
//       const res = await fetch("https://reqres.in/api/users")
//       // console.log(res)
//       const json = await res.json();
//       // console.log(json)
//       setUsers(json.data);
//     } catch (error) {
//       setError(error);
//     }
//     setLoading(false);
//     console.log(users)
//   }

//   return (
//     <Fragment>
//       <div className="user-list">
//         <button onClick={fetchUsers} disabled={loading}>
//           {loading ? "Loading ..." : "show Users"}
//         </button>
//         {error && <div style={{ color: "red" }}> Failed:{String(error)}</div>}
//         <br />
//         <ul>
//           {
//             users.length > 0 && users.map((user) => {
//               return (<li key={user.id}>{user.first_name}</li>)
//             })
//           }
//         </ul>
//       </div>
//     </Fragment>
//   )
// }

import { Fragment, useState } from "react";

export default function UserList() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  const fetchUsers = async () => {
    setLoading(true);
    try {
      // const res = await fetch("https://reqres.in/api/users")
      // console.log(res)
      // const json = await res.json();
      // setUsers(json.data);

       fetch("https://reqres.in/api/users")
      .then((res) => {res.json()})
      .then((data) => console.log(data))
    } catch (error) {
      setError(error);
    }
    setLoading(false);
    // console.log(users);
  };

  return (
    <Fragment>
      <div className="user-list">
        <button onClick={fetchUsers} disabled={loading}>
          {loading ? "Loading ..." : "show Users"}
        </button>
        {error && <div style={{ color: "red" }}> Failed:{String(error)}</div>}
        <br />
        <ul>
          {users.length > 0 &&
            users.map((user) => {
              return <li key={user.id}>{user.first_name}</li>;
            })}
        </ul>
      </div>
    </Fragment>
  );
}
